<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>上传图片</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="tips">
    <div class="window">
        <div class="tipbody"></div>
        <div class="tipfooter"></div>
    </div>
</div>
<!-- Content -->
<div class="container image-editor">
    <div class="spinner"><img width="50" alt="" src="http://www.weitoo.com/oval.svg">
    </div>
    <label for="inputImage" class="btn-upload">
        点击选择图片
        <input type="file" accept="image/*" name="file" id="inputImage" class="cropit-image-input sr-only">
    </label>
    <div class="cropit-preview"></div>
</div>

<!-- Footer -->
<footer class="docs-footer">
    <ul class="operating">
        <li id="delete"><img src="images/delete.svg">
            <br>删除
        </li>
        <li id="whirling"><img src="images/whirling.svg">
            <br>旋转
        </li>
        <li id="enlarge"><img src="images/enlarge.svg">
            <br>放大
        </li>
        <li id="narrow"><img src="images/narrow.svg">
            <br>缩小
        </li>
        <li id="cut"><img src="images/cut.svg">
            <br>裁剪
        </li>
    </ul>
    <ul class="upload">
        <li id="delete1"><img src="images/delete.svg">
            <br>删除
        </li>
        <li id="modify"><img src="images/modify.svg">
            <br>修改
        </li>
        <li id="imgupload"><img src="images/imgupload.svg">
            <br>上传
        </li>
    </ul>
</footer>
<!-- Scripts -->
<script src="js/exif.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.cropit.js"></script>
<script>
    //获得URL参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    var $container = $('.container');
    var $preview = $('.cropit-preview');
    var $inputImage = $('.btn-upload');
    var $image = $('#image');
    var $spinner = $('.spinner');
    var $operating = $('.operating');
    var $upload = $('.upload');
    var $IMGZOOM;

    //cropit初始化
    $('.image-editor').cropit({
        exportZoom: 1.78,
        imageBackground: true,
        imageBackgroundBorderWidth: 120,
        smallImage: 'stretch',
        freeMove: true,
        onFileChange: function () {
            $inputImage.hide();
            $spinner.show();
        },
        onFileReaderError: function () {
            //选择图片错误
        },
        onImageLoading: function () {

        },
        onImageLoaded: function () {
            $spinner.hide();
            $preview.show();
            $IMGZOOM = $container.cropit('zoom');
            $operating.show();
        },
        onImageError: function (obj) {
            $spinner.hide();
            tips(obj.message, '好', 0);
        }
    });

    //放大
    $('#enlarge').click(function () {
        var $zoom = $container.cropit('zoom');
        if ($zoom < 1)
            $container.cropit('zoom', $zoom * 1.2);
    });

    //缩小
    $('#narrow').click(function () {
        var $zoom = $container.cropit('zoom');
        if ($zoom > $IMGZOOM)
            $container.cropit('zoom', $zoom * 0.8);

    });

    //旋转
    $('#whirling').click(function () {
        $container.cropit('rotateCW');
    });

    //删除
    $('#delete,#delete1').click(function () {
        $preview.hide();
        $operating.hide();
        $upload.hide();
        $inputImage.show();
        $container.cropit('reenable');
    });

    //裁剪
    $('#cut').click(function () {
        $('.cropit-preview-background').css('opacity', 0);
        $container.cropit('disable');
        $operating.hide();
        $upload.show();
    });

    //修改
    $('#modify').click(function () {
        $('.cropit-preview-background').css('opacity', 0.2);
        $container.cropit('reenable');
        $upload.hide();
        $operating.show();
    });


    //上传
    $('#imgupload').click(function () {
        var file = $container.cropit('export');
        //$container.html('<img src="' + data + '" >');  //测试的时候用
        var data = {};
        data.timestamp = getQueryString('timestamp');
        data.modType = 'test';
        data.uploadKey = $('#inputImage').val().split('\\').pop();
        data.sn = getQueryString('sn');
        data.file = file;
        $spinner.show();
        var token = getQueryString("token");
        $.ajax({
            type: "POST",
            url: 'http://192.168.1.10:18765/api/commodity-server/uploadImageByScanQRCode',//请求参数：1.sn 设备uid;2.token;3.timestamp 64位带毫秒时间戳
            data: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + token
            },
            success: function (Result) {
                if (Result.code == 0) {
                    setTimeout(function () {
                        $spinner.hide();
                        tips('上传成功', '继续上传', 1);
                    }, 3000);
                } else {
                    $spinner.hide();
                    tips(Result.message, '好', 0);
                }
            },
            error: function (xhr, errorText, errorType) {
                tips('网络错误', '好', 0);
            }
        });
        return false;
    });

    //弹出框提示
    function tips(content, footer, type) {
        var tip = $('#tips');
        tip.find('.tipbody').text(content);
        tip.find('.tipfooter').text(footer).attr('data-type', type);
        tip.show();
    }

    //控制tip的按钮
    $('.tipfooter').click(function () {
        var datatype = $(this).attr('data-type');
        if (datatype == 0) {
            $('#tips').hide();
        } else {
            $preview.hide();
            $operating.hide();
            $upload.hide();
            $inputImage.show();
            $('#tips').hide();
            $container.cropit('reenable');
        }
    })
</script>
</body>

</html>